import React from 'react'
import { usePermission } from '../../hooks/usePermission'
import { AdminOnly, UserOnly, VoiceChatPermission, AIChatPermission, LanguageSwitchPermission, SkinChangePermission } from '../../components/PermissionWrapper'

const PermissionTest: React.FC = () => {
  const { 
    userRole, 
    isAdmin, 
    isUser, 
    isLoggedIn, 
    canUseVoiceChat, 
    canUseAIChat, 
    canAccessAdmin,
    canWatchVideo,
    canEnterExhibition,
    canSwitchLanguage,
    canChangeSkin 
  } = usePermission()

  return (
    <div style={{ 
      padding: '20px', 
      background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%)',
      minHeight: '100vh',
      color: '#ffffff',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h1 style={{ textAlign: 'center', marginBottom: '30px' }}>权限控制测试页面</h1>
      
      {/* 用户信息 */}
      <div style={{ 
        background: 'rgba(255, 255, 255, 0.1)', 
        padding: '20px', 
        borderRadius: '10px', 
        marginBottom: '30px' 
      }}>
        <h2>当前用户信息</h2>
        <p><strong>登录状态:</strong> {isLoggedIn ? '✅ 已登录' : '❌ 未登录'}</p>
        <p><strong>用户角色:</strong> {userRole || '无'}</p>
        <p><strong>角色类型:</strong> {isAdmin ? '👑 管理员' : isUser ? '👤 普通用户' : '❓ 未知'}</p>
      </div>

      {/* 权限检查 */}
      <div style={{ 
        background: 'rgba(255, 255, 255, 0.1)', 
        padding: '20px', 
        borderRadius: '10px', 
        marginBottom: '30px' 
      }}>
        <h2>权限检查结果</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
          <div style={{ padding: '10px', background: canUseVoiceChat ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>语音对话:</strong> {canUseVoiceChat ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canUseAIChat ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>AI聊天:</strong> {canUseAIChat ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canAccessAdmin ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>管理功能:</strong> {canAccessAdmin ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canWatchVideo ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>观看视频:</strong> {canWatchVideo ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canEnterExhibition ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>进入展览馆:</strong> {canEnterExhibition ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canSwitchLanguage ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>语言切换:</strong> {canSwitchLanguage ? '✅ 允许' : '❌ 禁止'}
          </div>
          <div style={{ padding: '10px', background: canChangeSkin ? 'rgba(76, 175, 80, 0.2)' : 'rgba(244, 67, 54, 0.2)', borderRadius: '5px' }}>
            <strong>换肤功能:</strong> {canChangeSkin ? '✅ 允许' : '❌ 禁止'}
          </div>
        </div>
      </div>

      {/* 组件权限测试 */}
      <div style={{ 
        background: 'rgba(255, 255, 255, 0.1)', 
        padding: '20px', 
        borderRadius: '10px', 
        marginBottom: '30px' 
      }}>
        <h2>组件权限测试</h2>
        
        <div style={{ marginBottom: '20px' }}>
          <h3>管理员专用组件</h3>
          <AdminOnly fallback={<div style={{ color: '#ff6b6b' }}>❌ 您不是管理员，无法看到此内容</div>}>
            <div style={{ color: '#4CAF50', padding: '10px', background: 'rgba(76, 175, 80, 0.2)', borderRadius: '5px' }}>
              ✅ 这是管理员专用内容！
            </div>
          </AdminOnly>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3>普通用户专用组件</h3>
          <UserOnly fallback={<div style={{ color: '#ff6b6b' }}>❌ 您不是普通用户，无法看到此内容</div>}>
            <div style={{ color: '#2196F3', padding: '10px', background: 'rgba(33, 150, 243, 0.2)', borderRadius: '5px' }}>
              ✅ 这是普通用户专用内容！
            </div>
          </UserOnly>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3>语音对话权限组件</h3>
          <VoiceChatPermission fallback={<div style={{ color: '#ff6b6b' }}>❌ 您没有语音对话权限</div>}>
            <div style={{ color: '#FF9800', padding: '10px', background: 'rgba(255, 152, 0, 0.2)', borderRadius: '5px' }}>
              🎤 语音对话功能可用！
            </div>
          </VoiceChatPermission>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3>AI聊天权限组件</h3>
          <AIChatPermission fallback={<div style={{ color: '#ff6b6b' }}>❌ 您没有AI聊天权限</div>}>
            <div style={{ color: '#9C27B0', padding: '10px', background: 'rgba(156, 39, 176, 0.2)', borderRadius: '5px' }}>
              🤖 AI聊天功能可用！
            </div>
          </AIChatPermission>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3>语言切换权限组件</h3>
          <LanguageSwitchPermission fallback={<div style={{ color: '#ff6b6b' }}>❌ 您没有语言切换权限</div>}>
            <div style={{ color: '#00BCD4', padding: '10px', background: 'rgba(0, 188, 212, 0.2)', borderRadius: '5px' }}>
              🌐 语言切换功能可用！
            </div>
          </LanguageSwitchPermission>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3>换肤权限组件</h3>
          <SkinChangePermission fallback={<div style={{ color: '#ff6b6b' }}>❌ 您没有换肤权限</div>}>
            <div style={{ color: '#E91E63', padding: '10px', background: 'rgba(233, 30, 99, 0.2)', borderRadius: '5px' }}>
              🎨 换肤功能可用！
            </div>
          </SkinChangePermission>
        </div>
      </div>

      {/* 测试说明 */}
      <div style={{ 
        background: 'rgba(255, 255, 255, 0.1)', 
        padding: '20px', 
        borderRadius: '10px' 
      }}>
        <h2>测试说明</h2>
        <ul style={{ lineHeight: '1.6' }}>
          <li><strong>管理员 (role=1):</strong> 可以看到所有内容，包括语音对话、AI聊天、语言切换和换肤功能</li>
          <li><strong>普通用户 (role=2):</strong> 只能看到普通用户内容，无法使用语音对话、AI聊天、语言切换和换肤功能</li>
          <li><strong>未登录:</strong> 所有权限组件都会显示fallback内容</li>
          <li>请尝试用不同角色的账号登录来测试权限控制效果</li>
          <li><strong>注意:</strong> 语言切换和换肤按钮在主页面中会被隐藏，普通用户无法看到这些按钮</li>
        </ul>
      </div>
    </div>
  )
}

export default PermissionTest
